<template>
	<el-card>
		<div slot="header" class="clearfix">
			<h3>新增班级</h3>
		</div>
		<!-- 新增内容框 -->
		<el-form :model="addClassData" label-width="100px">
			<el-form-item label="选择专业：">
				<el-select v-model="addClassData.subjectsId" placeholder="请选择专业">
					<el-option v-for="item in subjectsData" :key="item._id" :label="item.name" :value="item._id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="班级名称：">
				<el-input v-model="addClassData.name"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addOneClassSubmit(addClassData)">确认新增</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	// 引入班级仓库
	const {
		mapActions: classesMapActions,
	} = createNamespacedHelpers(
		"classes"
	);
	// 引入专业仓库
	const {
		mapState: subjectsMapState,
		mapActions: subjectsMapActions,
	} = createNamespacedHelpers(
		"subjects"
	);
	export default {
		data() {
			return {
				addClassData: {
					name:'',
					subjectsId: '',
					// directorsId:'',
				},
			};
		},
		computed: {
			...subjectsMapState(['subjectsData']),
		},
		mounted() {
			// 获取专业
			this.getSubjects();
		},
		methods: {
			...subjectsMapActions(['getSubjects']),
			...classesMapActions(['addOneClass']),
			// 新增一个班级
			async addOneClassSubmit(addClassData) {
				const res = await this.addOneClass(addClassData);
				console.log(res);
				if (res.code) {
					this.$message({
						message: '新增成功！',
						type: 'success',
						center: true,
					});
					this.$router.push('/home/classesList')
				} else {
					this.$message({
						message: '新增失败！',
						type: 'error',
						center: true,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-card {

		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}

		.clearfix:after {
			clear: both
		}

		.el-form {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.el-form-item {
				width: 400px;

				.el-button {
					margin-top: 30px
				}

				;

				.avatar-uploader {
					width: 100px;
					border: 1px dashed #666;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
				}

				.avatar-uploader:hover {
					border-color: #409EFF;
				}

				.avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 100px;
					height: 100px;
					line-height: 100px;
					text-align: center;
				}

				.avatar {
					width: 100px;
					height: 100px;
					display: block;
				}
			}
		}
	}
</style>